<template>
  <div class="fenceTree">
    <el-input size='small' class="filter-input" placeholder="请输入关键字" v-model="filterText" style="margin-bottom:16px"
      prefix-icon="Search"> </el-input>
    <div class="treeDom">
      <el-tree class="myTree" :data="treeList" :props="defaultProps" node-key="id" :filter-node-method="filterNode"
        ref="myTree" :expand-on-click-node="false" show-checkbox @check="handleCheck"
        :default-checked-keys="defaultChecked" :check-strictly="false" @node-contextmenu="contextmenuHandle"
        @node-click="handleClick" v-if="showTree">
        <template #default="{ node, data }">
          <div v-if="data.type != '5'" class="node-icon">
            <svg-icon :icon-class="getNodeImg(data)" />
          </div>
          <span class="node-text overflow-text" :title="node.label ?? data.title">{{ node.label ?? data.title }}</span>
        </template>
      </el-tree>
      <!-- 嵌套一层增加触发范围 -->
      <div ref="menuDom" class="tree-menu" @mouseleave="closeMenu">
        <!-- type -1：根节点   0:公司    1:部门   2：车 5:围栏线路-->
        <ul ref="treeMenu">
          <li @click="rightMenuHandle('edit')" v-show="selectData.type == 5" v-hasPermi="['comlbs:electricFence:edit']">
            修改
          </li>
          <li @click="rightMenuHandle('del')" v-show="selectData.type == 5" v-hasPermi="['comlbs:electricFence:remove']">
            删除
          </li>
          <li @click="rightMenuHandle('addFence')" v-show="selectData.type != 5"
            v-hasPermi="['comlbs:electricFence:addFence']">新增围栏</li>
          <li @click="rightMenuHandle('addLine')" v-show="selectData.type != 5"
            v-hasPermi="['comlbs:electricFence:addLine']">新增线路</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { useData } from "@/api/tree"
export default {
  name: "fenceTree",
  props: {
    treeList: {
      type: Array,
      default: () => []
    },
    rightMenuClick: {
      type: Function,
      default: () => { }
    },
    handleClick: {
      type: Function,
      default: () => { }
    },
    defaultChecked: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    const defaultProps = ref({
      children: 'children',
      label: 'label',
      isLeaf: 'hasChildren'
    });
    const selectData = ref([]);
    const { treeNodeImg, showTree, filterText, debounce, myTree } = useData();
    return {
      defaultProps,
      filterText,
      selectData,
      treeNodeImg,
      showTree,
      debounce,
      myTree
    };
  },
  created() {

  },
  methods: {
    getNodeImg(data) {
      let imgHash = {
        0: "company",
        1: "department",
      }
      if (imgHash[data.type]) {
        return imgHash[data.type]
      }
    },
    //过滤树节点
    filterNode(value, data, node) {
      //element-UI tree树形控件搜索过滤节点，不展示子节点的问题
      if (!value) return true
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    handleCheck(data, checked) {
      let parent = this.$parent;
      let flag = true;
      do {
        if (parent.handleCheck) {
          parent.handleCheck(data, checked)
          flag = false;
        } else {
          parent = parent.$parent
        }
      } while (flag)
    },
    rightMenuHandle(type) {
      this.closeMenu();
      this.rightMenuClick(this.selectData, type);
    },
    closeMenu() {
      const menuDom = this.$refs.menuDom
      menuDom.classList.remove('active');
    },
    contextmenuHandle(e, data, node) {
      // type -1：根节点   0:公司    1:部门   2：车  5:围栏
      // if (data.type != 5) return
      this.selectData = data;
      const menu = this.$refs.treeMenu;
      const menuDom = this.$refs.menuDom;
      menuDom.classList.add('active');

      this.$nextTick(() => {
        const menuHeight = menu.clientHeight
        const menuWidth = menu.clientWidth
        const x = e.pageX // 触发节点到页面窗口左边的距离
        const y = e.pageY  // 触发节点到页面窗口顶部的距离

        // 如果会超出屏幕右边则停靠屏幕右边
        const rightNum = window.innerWidth - x;
        if (rightNum >= menuWidth) {
          menuDom.style.right = rightNum - menuWidth - 40 + 'px'
        } else {
          menuDom.style.right = '-40px'
        }

        // 如果会超出屏幕下边则停靠屏幕下边
        const rightTreeDomHeight = document.getElementById('leftTreeDom').clientHeight;
        const topFixHeight = document.getElementsByClassName('top-block')[0].clientHeight;
        const bottomNum = rightTreeDomHeight - (y - topFixHeight);
        if (bottomNum >= menuHeight) {
          menuDom.style.top = y - topFixHeight + 120 + 'px'
        } else {
          menuDom.style.top = rightTreeDomHeight - menuHeight + 'px';
        }
      })
    },
  },
  watch: {
    filterText(val) {
      let _this = this;
      function myFun() {
        // 此处val是string
        if (!!!val) {
          _this.showTree = false
          nextTick(() => {
            _this.showTree = true
          })
        } else {
          _this.myTree.filter(val);
        }
      }
      _this.debounce(myFun);
    },
    treeList() {
      if (!!this.filterText) {
        this.$nextTick(() => {
          this.myTree.filter(this.filterText);
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.fenceTree {
  height: 100%;

  :v-deep(.el-tree-node__content) {
    line-height: 26px;
    display: flex;
    align-items: center;
  }

  .treeDom {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    box-sizing: border-box;
  }

  .myTree {
    font-size: 14px;

    .node-text {
      margin-left: 5px;
    }
  }

  .tree-menu {
    position: fixed;
    visibility: hidden;
    color: #223355;
    font-size: 14px;
    padding: 0 40px;

    ul {
      width: 100px;
      border: 1px solid #DEDEDF;
      border-radius: 6px;
      background-color: #ffffff;
      box-shadow: 0 6px 24px #F4F5F5;
      padding: 8px 2px;
      box-sizing: border-box;
    }

    li {
      text-align: center;
      line-height: 32px;
      cursor: pointer;

      &:hover {
        background-color: #D6EDFF;
        color: #3388FF;
      }
    }

    &.active {
      visibility: visible;
      z-index: 2;
    }
  }
}

.filter-input {
  height: 32px;
}
</style>
